<template>
  <div class="screen-content">
    <div class="chart-box chart-1">
      <div class="chart-title">
        <svg-icon icon-class="screen-ring" class="icon" />
        <span>各社团消耗物资</span>
      </div>
      <div class="chart-content">
        <LineBarChart />
      </div>
    </div>
    <div class="chart-box chart-2">
      <div class="chart-title">
        <svg-icon icon-class="screen-ring" class="icon" />
        <span>社团物资使用率</span>
      </div>
      <div class="chart-content">
        <div class="chart-top">
          <DashboardChart></DashboardChart>
        </div>
        <div class="chart-footer">
          <div class="left">
            <div class="card">
              <h5>领用物资库存量</h5>
              <p>123456789</p>
            </div>
            <PieChart></PieChart>
          </div>
          <div class="right">
            <div class="card">
              <h5>借用物资库存量</h5>
              <p>123456789</p>
            </div>
            <PieChart></PieChart>
          </div>
        </div>
      </div>
    </div>
    <div class="chart-box chart-3">
      <div class="chart-title">
        <svg-icon icon-class="screen-ring" class="icon" />
        <span>库存物资比列</span>
      </div>
      <div class="chart-content">
        <RoseChart />
      </div>
    </div>
    <div class="chart-box chart-4">
      <div class="chart-title">
        <svg-icon icon-class="screen-ring" class="icon" />
        <span>各类物资库存占比</span>
      </div>
      <div class="chart-content">
        <RingChart />
      </div>
    </div>
    <div class="chart-box chart-5" style="overflow: auto;">
      <div class="chart-title">
        <svg-icon icon-class="screen-ring" class="icon" />
        <span>近一个月物资流动情况</span>
      </div>
      <div class="chart-content">
        <ScrollList />
      </div>
    </div>
    <div class="chart-box chart-6">
      <div class="chart-title">
        <svg-icon icon-class="screen-ring" class="icon" />
        <span>物资消耗趋势图</span>
      </div>
      <div class="chart-content">
        <AreaChart />
      </div>
    </div>
    <div class="chart-box chart-7">
      <div class="chart-title">
        <svg-icon icon-class="screen-ring" class="icon" />
        <span>本学期物资消耗统计</span>
      </div>
      <div class="chart-content">
        <DoubleBarChart />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
// 图一、折柱混合图
import LineBarChart from './charts/lineBarChart.vue'
// 图二、小饼图
import PieChart from './charts/pieChart.vue'
// 图二/中间驾驶舱
import DashboardChart from './charts/dashboardChart.vue'
// 图三、玫瑰图
import RoseChart from './charts/roseChart.vue'
// 图四、圆环图 
import RingChart from './charts/ringChart.vue'
// 图五、滚动列表
import ScrollList from './otherCom/scrollList.vue'
// 图六、面积图
import AreaChart from './charts/areaChart.vue'
// 图七、双柱柱状图
import DoubleBarChart from './charts/doubleBarChart.vue'
</script>
<style lang="scss" scoped>
.screen-content {
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2rem;
  min-height:0;

  .chart-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 3rem auto;
    border: 0.1rem solid #28FFFE;
    background-color: rgba(9, 13, 24, 0.9);

    .chart-title {
      display: flex;
      align-items: center;
      padding: 0 0.5rem;
      color: #28FFFE;
      font-size: 1.8rem;

      span {
        font-weight: 700;
        margin-left: 0.5rem;
      }
    }
  }

  .chart-2 {
    grid-area: 1/2/3/4;

    .chart-content {
      display: grid;
      grid-template-rows: auto 20rem;

      .chart-top {
        background: rgb(154, 217, 207);
      }

      .chart-footer {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        border-top: 1px solid #28FFFE;

        .left,
        .right {
          border-right: 1px solid #28FFFE;
          position: relative;
          ;

          .card {
            position: absolute;
            top: 22%;
            left: 8%;
            width: 25rem;
            height: 9rem;
            background-color: #288CFC;
            border-radius: 0.5rem;
            display: grid;

            h5,
            p {
              place-self: center;
            }

            h5 {
              color: #ddd;
              font-size: 1.8rem;
            }

            p {
              color: #eee;
              font-size: 2rem;
              font-weight: 700;
              font-style: italic;
            }
          }
        }

        .right {
          .card {
            background-color: #7782FC;
          }
        }
      }
    }

  }

  .chart-5 {
    grid-area: 2/4/4/5;
  }

  .chart-7 {
    grid-area: 3/2/4/4;
  }

}
</style>
